@import '../../styles/colors.scss';
@import '../../styles/spacing.scss';
@import '../../styles/variables.scss';
@import '../../styles/typography.scss';

$baseClass: 'vant-search';

.#{$baseClass} {
  background-color: $default;
  width: 100%;
  display: flex;
  padding: 10px 12px;
  position: relative;
  align-items: center;

  &:first-of-type(i) {
    position: absolute;
    left: 8px;
  }

  &__round {
    .vant-field {
      border-radius: 999px;
    }
  }

  &__showAction {
    padding-right: 0;
  }

  &__leftIcon {
    .vant-field__error {
      padding-left: 24px;
    }
  }

  .vant-field {
    background-color: $grey-background;
    padding: 0 0 0 8px;

    .vant-field__input {
      padding: 5px 8px 5px 0;

      .vant-icon__container {
        padding: 0;
      }

      input {
        width: 100%;
        background-color: $grey-background;
        border: none;
        border-radius: 2px;
        padding-left: $space-md;
      }
    }
  }

  &__action {
    padding: 0 $space-md;
    cursor: pointer;

    button {
      min-height: 34px;
    }

    .#{$baseClass}__cancel {
      @include search-action;
      cursor: pointer;
      background-color: $default;
      border: 0;
      padding: 0;
    }
  }

  &__disabled {
    input {
      cursor: not-allowed;
    }
  }
}
